<!-- 联系客服 -->
<template>
  <view class="customer-service-container">
    <!-- 页面内容 -->
    <view class="content-wrapper">
      <!-- 二维码区域 -->
      <view class="qrcode-section">
        <text class="qrcode-tip-one">长按识别二维码</text>
        <text class="qrcode-tip-two">添加您的客服助理</text>
        
        <view class="qrcode-box">
          <u-image 
            :src="qrcodeImage" 
            width="500rpx" 
            height="500rpx" 
            mode="aspectFit"
            @longpress="saveQrcode"
            showLoading
          ></u-image>
        </view>
      </view>
      
      <!-- 电话联系 -->
      <view class="phone-section">
        <text class="phone-text">电话联系：{{ phoneNumber }}</text>
        <u-button 
          type="primary" 
          plain 
          shape="circle" 
          size="mini"
          @click="makePhoneCall"
          class="call-btn"
        >
          拨打
        </u-button>
      </view>
    </view>
    
    <!-- 保存二维码提示 -->
    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
export default {
  data() {
    return {
      qrcodeImage: '/static/customer-service-qrcode.png', // 替换为实际二维码图片
      phoneNumber: '4546544654'
    }
  },
  methods: {
    // 长按保存二维码
    saveQrcode() {
      uni.showModal({
        title: '提示',
        content: '是否保存客服二维码到相册？',
        success: (res) => {
          if (res.confirm) {
            uni.showLoading({
              title: '保存中...'
            })
            
            // 实际项目中这里应该调用API保存图片
            setTimeout(() => {
              uni.hideLoading()
              this.$refs.uToast.show({
                title: '二维码已保存',
                type: 'success'
              })
            }, 1500)
          }
        }
      })
    },
    
    // 拨打电话
    makePhoneCall() {
      uni.makePhoneCall({
        phoneNumber: this.phoneNumber,
        success: () => {
          console.log('拨打电话成功')
        },
        fail: (err) => {
          console.log('拨打电话失败', err)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.customer-service-container {
  padding: 60rpx 40rpx;
  // background-color: #f5f7fa;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.content-wrapper {
  width: 100%;
  max-width: 600rpx;
  // background-color: #fff;
  border-radius: 16rpx;
  padding: 50rpx 40rpx;
  // box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.qrcode-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 60rpx;
  
  .qrcode-tip-one {
    font-size: 50rpx;
    color: #666;
    text-align: center;
    line-height: 1.6;
    

  }
	
	.qrcode-tip-two {
		font-size: 30rpx;
		color: #666;
		text-align: center;
		line-height: 1.6;
		margin-bottom: 30rpx;
	}
	
  
  .qrcode-box {
    margin-top: 30rpx;
    padding: 20rpx;
		border: 1px solid #b6b600;
  }
}

.phone-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  
  .phone-text {
    font-size: 28rpx;
    color: #333;
  }
  
  .call-btn {
    width: 120rpx;
  }
}
</style>